import React, {useState} from 'react';
import {  history } from '@umijs/max';
import {Menu, Button} from 'antd';
import {MenuUnfoldOutlined, MenuFoldOutlined} from '@ant-design/icons';
// import logo from '@/assets/logo.png'
const Index= (props: {menuData: [] }) => {
const { menuData } = props || {}
const [collapsed, setCollapsed] = useState(false);
  const handleMenuClick = (e) => {
    history.push(e.key)
  }

    const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };

  return (
    <>
    <div
        style={{
          overflow: 'hidden',
          flex: '0 0 ' + `${collapsed ? 80 : 256}`+ 'px',
          transition:
            'background-color 0.3s ease 0s, min-width 0.3s ease 0s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s ,flex 0.4s ease 0s',
        }}
      />
    <div
    style={{
      // width: '0 0 ' + 256 + 'px',
      overflow: 'hidden',
      // flex: '0 0 ' + 256 + 'px',
      borderRight: '1px solid #e8e8e8',
      boxSizing: 'border-box',
      backgroundColor: '#fff',
      position:'fixed',
      top:0,
      bottom:0,
      left:0,
      zIndex:20,
      width: collapsed ? 80 : 256,
    }}
    >
      <div style={{marginTop:56}}>
        <Menu mode="inline" inlineCollapsed={collapsed} theme="light" onClick={(e) => handleMenuClick(e)} items={menuData} />
      </div>
       <Button  
       type="text"
       onClick={toggleCollapsed} 
       style={{ 
        position:'absolute',
        bottom:20,
        left:20
       }}
       >
        {collapsed ? <MenuUnfoldOutlined  /> : <MenuFoldOutlined />}
      </Button>
    </div>
    </>
  )
};

export default Index;